<style>
    .i_border {
        border: 1px solid black;
        border-radius: 50%;
        width: 27px;
        height: 27px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>
<style>
    #btn {
        width: 60px;
        height: 60px;
        position: fixed;
        /* //固定定位设置 */
        right: 30px;
        bottom: 30px;
        background-color: rgb(207, 207, 207);
        border-radius: 30px;
        display: none;
        justify-content: center;
        align-items: center;
        color: honeydew;
    }

    .box {
        /* border: solid 1px #C9C9C9; */
        margin: 10px;
    }

    /* 如果list没给高度则给一个默认高度 */
    .iframe-card {
        height: 568px;
    }

    .word-card {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

    }

    .word {
        /* margin:10px !important; */
        /* border: 1px solid #C9C9C9; */
        background-color: #fff;
        font-size: 12px;
        color: #ffffff;
        text-decoration: none;
        cursor: pointer;
        padding: 7px;
        background-color: gray;
        transition: all 0.6s;

    }

    .word:hover {
        transform: scale(1.2);
    }

    .show_component {
        border: 1px solid #C9C9C9;
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-top: 10px;
    }

    .btn-card {
        /* background-color: rgba(0, 0, 0, 0.507); */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 10px;
    }

    .btn-card .small {
        margin-right: 5px;
    }

    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-bottom: 10px;
    }

    .author-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .author-info .name {
        margin-left: 10px;
        font-size: 14px;
        color: black;
        line-height: 25px;
    }

    .author-info .tag {
        margin-left: 10px;
        color: #aaa;
        font-size: 12px;
        line-height: 22px;
    }

    .author-info button {
        margin-left: auto;
        margin-right: 10px;
    }

    .bar {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .xx-waterflow {
        width: 100%;
        height: 100%;
        position: relative;
    }


    
</style>
<script>
    debugger;
    function render_iframe() {
        render_iframe.prototype.srcdoc = function (iframe, url) {
            $.ajax({
                url: url, //json文件位置
                type: "get", //请求方式为get
                success: function (res) {
                    var html = `
<html>
<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        html {
            height: 100%;
        }
    
        body {
            overflow: hidden;
            height: 100%;
        }
    <\/style>
<\/head>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"><\/script>
<body>
${res} 
<\/body>
<\/html>
`
                    //$(iframe).attr("srcdoc", html);
                    var iframeHtml = $(iframe).get(0);
                    iframeHtml.contentWindow.document.body.innerHTML = "";
                    iframeHtml.contentWindow.document.write(html); // 动态写入返回页面到iframe
                    iframeHtml.contentWindow.document.close();
                }
            })
        }
    }
debugger;
    // 获取组件列表
    $("#component_type_list").load("https://res.dcdev.net/dcdev/v1.0.8/assets/html/render_somthing.html",
        "",
        function () {
            data = {
                id: "component_type_list",
                // x表示横向滚动、y表示竖向滚动、block表示块状向下滚动
                direction: "y",
                search_config: {
                    enable: true,
                },
                // 每个ul的配置
                ul_config: {
                    ul_class: "",
                    ul_style: "",
                },
                // 每个li的配置
                li_config: {
                    li_class: "",
                    li_style: "",
                    li_html: {
                        // 如果不设置条件渲染，则使用默认的html代码渲染
                        default: {
                            html: `
                            <div class="show_component" style="width:320px;">
            <div class="author-info">
                <div style="margin-top: 10px;width:100%;margin-bottom:10px;">
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;">
                        <div >
                        <div class="name">#{desc}</div>
                        <div class="tag">#{vendor}</div>
                        </div>

                        <img style="margin-left:auto;margin-right:10px;" class="avatar" src="#{headimgurl}">
                    </div>
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;height: 40px;align-items: center;">
                            <div class="tag">#{create_time}</div>
                            <i title="重命名" data-key="rename_component" style="margin-left:auto;font-size: 18px;padding-left: 2px;padding-top: 2px;" class="i_border layui-icon layui-icon-survey"></i>
                            <i title="编辑" data-key="edit_component" style="margin-left:10px;font-size: 20px;" class="i_border layui-icon layui-icon-edit"></i>
                            <i title="删除" data-key="delete_component" style="font-size: 20px;margin-left:10px;" class=" i_border layui-icon layui-icon-delete"></i>
                            <i title="刷新" data-key="reload_component" style="margin-left:10px;font-size: 18px;" class="i_border layui-icon layui-icon-refresh"></i>
                            <i id="audit_#{component_id}" title="添加" data-key="use_component" style="margin-left:10px;font-size: 30px;width:40px;height:40px;margin-right:10px;" class="i_border layui-icon layui-icon layui-icon-auz"></i>
                    </div>
                </div>
            </div>
            <iframe id="#{component_id}"  class="iframe-card" style="height:568px;"></iframe>
        </div>
`
                        },
                        // 条件渲染内容
                        /*
                            ^{ROW_INDEX} - 常量，表示数据数组的下标
                            #{title}     - 变量，表示数据数组中对象的key
                        */
                        condition: [{
                            //渲染条件
                            expression: `#{is_audit} == '1'`,
                            //渲染模板
                            html: `
                <div class="show_component" style="width:320px;">
    <div class="author-info">
                <div style="margin-top: 10px;width:100%;margin-bottom:10px;">
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;">
                        <div >
                        <div class="name">#{desc}</div>
                        <div class="tag">#{vendor}</div>
                        </div>

                        <img style="margin-left:auto;margin-right:10px;" class="avatar" src="#{headimgurl}">
                    </div>
                    <div style="display: flex;flex-direction: row;justify-content: flex-start;height: 40px;align-items: center;">
                            <div class="tag">#{create_time}</div>
                            <i title="重命名" data-key="rename_component" style="margin-left:auto;font-size: 18px;padding-left: 2px;padding-top: 2px;" class="i_border layui-icon layui-icon-survey"></i>
                            <i title="编辑" data-key="edit_component" style="margin-left:10px;font-size: 20px;" class="i_border layui-icon layui-icon-edit"></i>
                            <i title="删除" data-key="delete_component" style="font-size: 20px;margin-left:10px;" class=" i_border layui-icon layui-icon-delete"></i>
                            <i title="刷新" data-key="reload_component" style="margin-left:10px;font-size: 18px;" class="i_border layui-icon layui-icon-refresh"></i>
                            <i id="audit_#{component_id}" title="添加" data-key="use_component" style="margin-left:10px;font-size: 30px;width:40px;height:40px;margin-right:10px;color:red;border: 1px solid red;" class="i_border layui-icon layui-icon layui-icon-auz"></i>
                    </div>
                </div>
            </div>
    <iframe id="#{component_id}"  class="iframe-card" style="height:568px;"></iframe>
</div>
                `
                        }],
                    },
                    // td 的函数配置
                    li_function: [{
                        field: "create_time",
                        type: "format_datetime",
                        format: "to-now",
                    }, ],
                },
                // 各种类型的回调
                cb_config: {
                    // 点击的回调
                    click: function (res) {
                        var data = res;
                        debugger
                        if (res.li_key == "use_component") {
                            var audit;
                            var tips;
                            if (window[data.ul_value.component_id].audit == undefined) {
                                window[data.ul_value.component_id].audit = data.ul_value.is_audit;
                            }
                            if (window[data.ul_value.component_id].audit == "0") {
                                tips = "确定允许此组件审核？";
                            } else {
                                tips = "确定取消此组件审核？"
                            }
                            ui_class.show_confirm(tips, null,
                                function (res) {
                                    if (res.res) {
                                        if (window[data.ul_value.component_id].audit == "0") {
                                            audit = '1';
                                            window[data.ul_value.component_id].audit = "1";
                                        } else {
                                            audit = '0';
                                            window[data.ul_value.component_id].audit = "0";
                                        }
                                        var url =
                                            "https://api.dcdev.net/v1.0.1/component/audit_component.php";

                                        var _data = {
                                            "component_id": data.ul_value.component_id,
                                            "is_audit": audit
                                        }
                                        $.ajax({
                                            method: "post",
                                            dataType: "json",
                                            url: url,
                                            data: {
                                                params: JSON.stringify(_data)
                                            },
                                            success: function (res) {
                                                if (res.res) {
                                                    if (_data.is_audit == "0") {
                                                        ui_class.show_success("取消通过审核.");
                                                        $(`#audit_${data.ul_value.component_id}`)
                                                            .css('color', "black");
                                                        $(`#audit_${data.ul_value.component_id}`)
                                                            .css('border',
                                                                "1px solid black");

                                                    } else {

                                                        ui_class.show_success("已通过审核.");
                                                        $(`#audit_${data.ul_value.component_id}`)
                                                            .css('color', "red");
                                                        $(`#audit_${data.ul_value.component_id}`)
                                                            .css('border', "1px solid red");

                                                    }

                                                }
                                            }
                                        })
                                    }
                                })
                            // ui_class.show_confirm(`确定要添加该组件？`, null,
                            //     function (res) {
                            //         if (res.res) {
                            //             if ($('#' + data.ul_value.vendor).css("background-color") !=
                            //                 "rgb(194, 194, 194)") {
                            //                 //已选
                            //             } else {
                            //                 //选择
                            //                 $('#' + data.ul_value.vendor).css("background-color",
                            //                     "#5FB878");
                            //                 selected_framework.push(data.ul_value.vendor)
                            //                 // madeImport(selected_framework)
                            //             }
                            //             $.get(`https://res.dcdev.net/component/${data.ul_value.component_id}.html`,
                            //                 function (
                            //                     html) {
                            //                     var id = Date.parse(new Date());
                            //                     //组件添加时，添加前后注释
                            //                     var head =
                            //                         `<!-- ${data.ul_value.vendor} / ${data.ul_value.desc},id:${id} start-->\n`
                            //                     var bottom =
                            //                         `\n<!-- ${data.ul_value.vendor} / ${data.ul_value.desc},id:${id} end-->`
                            //                     html_temp = head + html + bottom;
                            //                     //统一判断除重
                            //                     html_temp = cleanRepeatScriptAndLinkSrc(
                            //                         html_temp,
                            //                         editor.getValue())
                            //                     insert_to_editor(html_temp + '\n\n');
                            //                 })
                            //         }
                            //     })
                        }
                        if (res.li_key == 'edit_component') {
                            ui_class.show_confirm(`确定要修改该组件？`, null,
                                function (res) {
                                    if (res.res) {
                                        window.open(
                                            `https://res.dcdev.net/dcdev/v1.0.8/func/component_creator/component_creator.html?id=${data.ul_value.component_id}`
                                        );
                                    }
                                })
                        }
                        if (res.li_key == 'reload_component') {
                            debugger;
                            getcontent(data.ul_value.component_id);

                        }
                        if (res.li_key == 'rename_component') {
                            var component_desc = data.ul_value.desc;
                            var component_id = data.ul_value.component_id;
                            ui_class.show_inputor({
                                type: "char",
                                title: "重命名组件",
                                text: component_desc,
                                opacity: 0.2,
                                min_value: 4,
                                max_value: 20,
                            }, function (res) {
                                var url =
                                    "https://api.dcdev.net/v1.0.1/component/update_component.php";
                                var data = {
                                    "component_id": component_id,
                                    "desc": res.text,
                                }
                                $.ajax({
                                    method: "post",
                                    dataType: "json",
                                    url: url,
                                    data: {
                                        params: JSON.stringify(data)
                                    },
                                    success: function (res) {
                                        if (res.res) {
                                            ui_class.show_success("更名成功.");
                                        } else {
                                            ui_class.show_error(res.desc);
                                        }
                                    }
                                })
                            })
                        }
                        if (res.li_key == 'delete_component') {
                            ui_class.show_confirm(`确定要删除该组件？`, null,
                                function (res) {
                                    if (res.res) {
                                        var url =
                                            "https://api.dcdev.net/v1.0.1/component/delete_component.php";
                                        var _data = {
                                            "component_id": data.ul_value.component_id,
                                        }
                                        $.ajax({
                                            method: "post",
                                            dataType: "json",
                                            url: url,
                                            data: {
                                                params: JSON.stringify(_data)
                                            },
                                            success: function (res) {
                                                render_somthing_component_type_list
                                                    .render(
                                                        madeComponent(window['desc']));
                                            }
                                        })
                                    }
                                })
                        }
                    },
                    // 获取数据之后的回调,如需提前干预可在此修改html之后返回
                    data_fetched: function (res) {
                        console.log(res);
                    },
                    // 拼接好html代码且渲染前的回调(data为该行的数据，html为准备渲染的html),如需提前干预可在此修改html之后返回
                    after_render: function (res) {
                        // 请求返回的数据
                        var data = res.object.data_fetched.page_data;
                        // 获取所有iframe
                        var array = $(`#_dc_component_type_list_ul_`).children();
                        var component_id;
                        var url;
                        var iframe;
                        // 加载iframe内容
                        for (let index = 0; index < array.length; index++) {
                            const element = array[index];
                            iframe = $($($(`#_dc_component_type_list_ul_`).children()[index])
                                    .children()[0])
                                .children()[1];
                            component_id = data[index]["component_id"];
                            url = `https://res.dcdev.net/component/${component_id}.html`;
                            // // 写入url内容到iframe
                            new render_iframe().srcdoc(iframe, url);
                        }
                        // 隐藏进度条页面
                        $("#_progress_").fadeOut(500);
                    },
                    // 所有数据加载完毕的回调
                    no_more: function (res) {
                        $(".mask").fadeOut('slow');
                    },
                },
                // 请求及分页的配置
                data_config: {
                    require: {
                        url: `https://api.dcdev.net/v1.0.1/component/select_all_component.php`,
                        data: {
                            __PAGE_NUMBER: 1,
                            __PAGE_COUNT: 5,
                            __QUERY_COLUMNS: "",
                            __ORDER: [],
                        },
                        method: "post",
                        dataType: "json",
                        require_data_param: "data",
                        page_number_param: "__PAGE_NUMBER",
                        page_count_param: "__PAGE_COUNT",
                        data_count_param: "__COUNT",
                        search_keyword_param: "keyword",
                        pagination: {
                            enable: true,
                        }
                    },
                },
            };
            new render_class().render(data, null, null)
        });

    function getcontent(id) {

        var url = `https://res.dcdev.net/component/${id}.html`
        $.ajax({
            url: url, //json文件位置
            type: "get", //请求方式为get
            success: function (res) {
                var html = `
    <style>
        html {
            height: 100%;
        }

        body {
            overflow: hidden;
            height: 100%;
        }
    <\/style>
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"><\/script> 
    <div id="body_container" style="height: 100%;overflow: auto;position: inherit;">
    ${res} 
    <\/div>
                `
               // $(`#${id}`).attr("srcdoc", html);
                var iframeHtml = $(`#${id}`).get(0);
                    iframeHtml.contentWindow.document.body.innerHTML = "";
                    iframeHtml.contentWindow.document.write(html); // 动态写入返回页面到iframe
            }
        })
    }
</script>